<template>
  <basic-container>
    <div id="complaint">
      <h3>投诉管理</h3>
      <el-select filterable placeholder="请选择用户昵称">
        <el-option
          v-for="item in shopkeeper"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-date-picker
          v-model="value3"
          type="datetime"
          placeholder="选择日期时间"
          style="margin-left: 10px;"
        >
        </el-date-picker>
      <avue-crud ref="crud" :option="option" :data="data" :page="page">
      </avue-crud>
    </div>
  </basic-container>
</template>

<script>
export default {
  data() {
    return {
      value3: "",
      data: [
        {
          id: 0,
          name: "张三",
          sex: 1,
        },
        {
          id: 1,
          name: "李四",
          sex: 0,
        },
      ],
      page: {
        total: 0,
        layout: "total,pager,prev, next",
        background: false,
        pageNum: 1,
        pageSize: 50,
      },
      option: {
        addBtn: false,
        menu: false,
        align: "center",
        menuAlign: "center",
        dialogClickModal:false,
        column: [
          {
            label: "日期",
            prop: "id",
          },
          {
            label: "店铺名称",
            prop: "name",
          },
          {
            label: "房间号",
            prop: "name",
          },
          {
            label: "商品名称",
            prop: "name",
          },
          {
            label: "投诉时间",
            prop: "name",
          },
          {
            label: "投诉内容",
            prop: "name",
            // rules: [
            //   {
            //     required: true,
            //     message: "请输入姓名",
            //     trigger: "blur",
            //   },
            // ],
          },
        ],
      },
      shopkeeper: [], //店铺名称下拉框
      shopnamevalue: "", //店铺名称选中数据
      tableSelectList: [], // 选中的数据
      tableLabelList: [], //导出表格的表头
      tablePropList: [], //导出表格的行关联信息
    };
  },
  methods: {
    rowCell(row, index) {
      this.$refs.crud.rowCell(row, index);
    },
    rowSave(form, done) {
      this.$message.success("新增数据" + JSON.stringify(form));
      done();
    },
    rowUpdate(form, index, done) {
      this.$message.success(
        "编辑数据" + JSON.stringify(form) + "数据序号" + index
      );
      done();
    },
    handleRowClick(row, event, column) {
      this.$message({
        showClose: true,
        message: "序号" + row.$index,
        type: "success",
      });
    },

    //导出按钮
    openSelExcel(st) {
      let _this = this;
      if (st == 1) {
        if (_this.tableSelectList.length === 0) {
          _this.$message({
            message: "请至少选择一条需要导出的数据",
            type: "warning",
          });
          return;
        }
        _this
          .$confirm("该操作将导出选中的数据，是否继续", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            //导出
            let excelList = _this.tableSelectList;
            console.log(excelList);
            _this.openExcel(excelList);
          })
          .catch(() => {});
      } else {
        _this
          .$confirm("该操作将导出表格中的数据，是否继续", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            //导出

            let excelList = _this.data;
            console.log(excelList);
            _this.openExcel(excelList);
          })
          .catch(() => {});
      }
    },
  },
};
</script>

<style>
#complaint h3 {
  margin: 20px 0;
}
</style>